<!DOCTYPE html>
<!-- saved from url=(0052)https://www.jq22.com/demo/jQueryComment201711092334/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>评论插件</title>
<link rel="stylesheet" type="text/css" href="./DS评论插件_files/bootstrap-3.3.4.css">
<style>
	.container{
		width: 1000px;
	}
	.commentbox{
		width: 900px;
		margin: 20px auto;
	}
	.mytextarea {
	    width: 100%;
	    overflow: auto;
	    word-break: break-all;
	    height: 100px;
	    color: #000;
	    font-size: 1em;
	    resize: none;
	}
	.comment-list{
		width: 900px;
		margin: 20px auto;
		clear: both;
		padding-top: 20px;
	}
	.comment-list .comment-info{
		position: relative;
		margin-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}
	.comment-list .comment-info header{
		width: 10%;
		position: absolute;
	}
	.comment-list .comment-info header img{
		width: 100%;
		border-radius: 50%;
		padding: 5px;
	}
	.comment-list .comment-info .comment-right{
		padding:5px 0px 5px 11%; 
	}
	.comment-list .comment-info .comment-right h3{
		margin: 5px 0px;
	}
	.comment-list .comment-info .comment-right .comment-content-header{
		height: 25px;
	}
	.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
		padding-right: 2em;
		color: #aaa;
	}
	.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
		cursor: pointer;
	}
	.comment-list .comment-info .comment-right .reply-list {
		border-left: 3px solid #ccc;
		padding-left: 7px;
	}
	.comment-list .comment-info .comment-right .reply-list .reply{
		border-bottom: 1px dashed #ccc;
	}
	.comment-list .comment-info .comment-right .reply-list .reply div span{
		padding-left: 10px;
	}
	.comment-list .comment-info .comment-right .reply-list .reply p span{
		padding-right: 2em;
		color: #aaa;
	}
</style>
</head>
<body style="">
<div class="container">
<div class="commentbox">
<textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
<div class="btn btn-info pull-right" id="comment">评论</div>
</div>
<div class="comment-list"><div class="comment-info"><header><img src="./DS评论插件_files/img.jpg"></header><div class="comment-right"><h3>匿名</h3><div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i>2020-10-14 13:07:31</span></div><p class="content">方法</p><div class="comment-content-footer"><div class="row"><div class="col-md-10"><span><i class="glyphicon glyphicon-pushpin"></i> 来自:win10</span><span><i class="glyphicon glyphicon-globe"></i> 深圳</span></div><div class="col-md-2"><span class="reply-btn">回复</span></div></div></div><div class="reply-list"></div></div></div>

<div class="comment-info"><header><img src="./DS评论插件_files/img.jpg"></header><div class="comment-right"><h3>帅大叔</h3><div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i>2017-10-17 11:42:53</span><span><i class="glyphicon glyphicon-map-marker"></i>深圳</span></div><p class="content">同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。</p><div class="comment-content-footer"><div class="row"><div class="col-md-10"><span><i class="glyphicon glyphicon-globe"></i> 谷歌</span></div><div class="col-md-2"><span class="reply-btn">回复</span></div></div></div><div class="reply-list"><div class="reply"><div><a href="javascript:void(0)" class="replyname">匿名</a>:<a href="javascript:void(0)">@帅大叔</a><span>好</span></div><p><span>2020-10-14 13:07:56</span> <span class="reply-list-btn">回复</span></p></div></div></div></div><div class="comment-info"><header><img src="./DS评论插件_files/img.jpg"></header><div class="comment-right"><h3>匿名</h3><div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i>2017-10-17 11:42:53</span><span><i class="glyphicon glyphicon-map-marker"></i>深圳</span></div><p class="content">到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”</p><div class="comment-content-footer"><div class="row"><div class="col-md-10"><span><i class="glyphicon glyphicon-globe"></i> 谷歌</span></div><div class="col-md-2"><span class="reply-btn">回复</span></div></div></div><div class="reply-list"><div class="reply"><div><a href="javascript:void(0)" class="replyname">帅大叔</a>:<a href="javascript:void(0)">@匿名</a><span>来啊，我们一起吃鸡</span></div><p><span>2017-10-17 11:42:53</span> <span class="reply-list-btn">回复</span></p></div></div></div></div><div class="comment-info"><header><img src="./DS评论插件_files/img.jpg"></header><div class="comment-right"><h3>帅大叔</h3><div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i>2017-10-17 11:42:53</span><span><i class="glyphicon glyphicon-map-marker"></i>深圳</span></div><p class="content">同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。</p><div class="comment-content-footer"><div class="row"><div class="col-md-10"><span><i class="glyphicon glyphicon-pushpin"></i> 来自:win10</span><span><i class="glyphicon glyphicon-globe"></i> 谷歌</span></div><div class="col-md-2"><span class="reply-btn">回复</span></div></div></div><div class="reply-list"></div></div></div></div>
</div>
<script src="./DS评论插件_files/jquery-1.10.2.js.下载"></script><script src="./DS评论插件_files/jquery.min.js.下载"></script>
<script src="./DS评论插件_files/jquery.comment.js.下载"></script>
<script src="./DS评论插件_files/bootstrap-3.3.4.js.下载"></script><script src="./DS评论插件_files/bootstrap.min.js.下载"></script>
<script>
	//初始化数据
	var arr = [
		{id:1,img:"./images/img.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[]},
		{id:2,img:"./images/img.jpg",replyName:"匿名",beReplyName:"",content:"到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[{id:3,img:"",replyName:"帅大叔",beReplyName:"匿名",content:"来啊，我们一起吃鸡",time:"2017-10-17 11:42:53",address:"",osname:"",browse:"谷歌"}]},
		{id:3,img:"./images/img.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",time:"2017-10-17 11:42:53",address:"深圳",osname:"win10",browse:"谷歌",replyBody:[]}
	];
	$(function(){
		$(".comment-list").addCommentList({data:arr,add:""});
		$("#comment").click(function(){
			var obj = new Object();
			obj.img="./images/img.jpg";
			obj.replyName="匿名";
			obj.content=$("#content").val();
			obj.browse="深圳";
			obj.osname="win10";
			obj.replyBody="";
			$(".comment-list").addCommentList({data:[],add:obj});
		});
	})
	
</script>

</body></html>